<template>
  <div class="root">
    <!-- <p>用户info：{{userInfo}}</p> -->
    <!-- <p>用户code：{{userCode}}</p> -->
    <!-- <p>错误：{{userErr}}</p> -->
    <van-row type="flex" justify="space-between">
      <!-- 传0没tag -->
      <van-col
        @click="item.noClick?'':$router.push(`/companyList?type=${item.type}`)"
        v-for="(item, index) in companyInfoList"
        :key="index"
        class="col"
        span="11"
      >
        <p class="top-title">{{ item.name }}</p>
        <p>{{ item.value }}</p>
      </van-col>
    </van-row>
    <div class="chart1 last-box">
      <van-cell class="last-box-cell" title="本月监测预警企业数" />
      <van-row type="flex" justify="space-between">
        <!-- 传1有tag -->
        <van-col
          @click="
            item.value != 'empty'
              ? $router.push(
                  `/questionBank?type=${item.type}&insertTime=${
                    new Date().getFullYear() +
                    '-' +
                    (new Date().getMonth() + 1 < 10
                      ? '0' + (new Date().getMonth() + 1)
                      : new Date().getMonth() + 1)
                  }`
                )
              : ''
          "
          class="col"
          span="7"
          v-for="(item, index) in warnList"
          :style="item.value == 'empty' ? '' : ''"
          :key="index"
        >
          <template v-if="item.value != 'empty'">
            <van-tag
              v-if="item.newAddNum"
              class="newAddTag"
              round
              type="danger"
              >{{ item.newAddNum }}</van-tag
            >
            <span>
              {{ item.name }}
              <br />
              <br />
              {{ item.value }}
            </span>
          </template>
          <template v-else>
            <div></div>
          </template>
        </van-col>
      </van-row>
    </div>
    <div class="chart-wrapper chart1">
      <van-cell title="监测预警企业数量走势" />
      <canvas id="yujingshuliang"></canvas>
    </div>
    <div class="chart-wrapper chart-tab">
      <van-cell title="产业分布占比" />
      <van-tabs type="card" @click="tabsChange" animated>
        <van-tab title="今年">
          <canvas id="chanyejiegoufenxi"></canvas>
        </van-tab>
        <van-tab title="去年">
          <canvas id="qunianchanyejiegoufenxi"></canvas>
        </van-tab>
      </van-tabs>
    </div>
    <div class="chart-wrapper chart3">
      <van-cell title="辖区内新注册企业走势" />
      <canvas id="zhucezoushifenxi"></canvas>
    </div>
    <div class="chart-wrapper chart3 chart-big">
      <van-cell title="辖区内企业纳税走势" />
      <canvas id="nashuizoushi"></canvas>
    </div>
    <div class="chart-wrapper2 chart2">
      <van-cell title="注册资本分析" />
      <div class="content-box">
        <div class="point"></div>
        <div class="right-box">
          <p>0-100万</p>
          <p>{{ zczbfxData[0] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color2"></div>
        <div class="right-box">
          <p>100-500万</p>
          <p>{{ zczbfxData[1] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color3"></div>
        <div class="right-box">
          <p>500-1000万</p>
          <p>{{ zczbfxData[2] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color4"></div>
        <div class="right-box">
          <p>1000-5000万</p>
          <p>{{ zczbfxData[3] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color5"></div>
        <div class="right-box">
          <p>5000万以上</p>
          <p>{{ zczbfxData[4] }}</p>
        </div>
      </div>
    </div>
    <div class="chart-wrapper2 chart2">
      <van-cell title="成立年限分析" />
      <div class="content-box">
        <div class="point"></div>
        <div class="right-box">
          <p>1年以内</p>
          <p>{{ clnxfxData[0] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color2"></div>
        <div class="right-box">
          <p>1-3年</p>
          <p>{{ clnxfxData[1] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color3"></div>
        <div class="right-box">
          <p>3-5年</p>
          <p>{{ clnxfxData[2] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color4"></div>
        <div class="right-box">
          <p>5-10年</p>
          <p>{{ clnxfxData[3] }}</p>
        </div>
      </div>
      <div class="content-box">
        <div class="point color5"></div>
        <div class="right-box">
          <p>10年以上</p>
          <p>{{ clnxfxData[4] }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  chanyejiegoufenxi,
  zhucezoushifenxi,
  nashuizoushi,
  yujingshuliang,
} from "../assets/js/f2.js";
export default {
  data() {
    return {
      companyInfoList: [
        { name: "企业总数", value: 0 },
        { name: "虚拟注册企业", value: 0 },
        { name: "高新企业", value: 0 },
        { name: "规上企业", value: 0 },
        { name: "本月新增企业", value: 0 },
        { name: "本月新注册企业", value: 0 },
      ],
      warnList: [
        // { name: "用能异常", value: 2, newAddNum: 2, type: "wtlx-ynyc-sj" },
        // { name: "访客激增", value: 1, newAddNum: 1, type: "wtlx-fkjz-sj" },
        // { name: "人员骤减", value: 2, newAddNum: 2, type: "wtlx-ryzj-sj" },
        // { name: "社保异常", value: 3, newAddNum: 3, type: "wtlx-sbyc-ej" },
        // { name: "经营异常", value: 0, newAddNum: 0, type: "wtlx-jyyc-ej" },
        // { name: "税收异常", value: 1, newAddNum: 1, type: "wtlx-ssyc-ej" },
        // { name: "失信处罚", value: 1, newAddNum: 1, type: "wtlx-sxcf-ej" },
        // { name: "金融风险", value: 1, newAddNum: 1, type: "wtlx-jrfx-ej" },
        // {
        //   name: "企业骤减园区",
        //   value: 1,
        //   newAddNum: 1,
        //   type: "wtlx-qyzjyq-ej",
        // },
        // { name: "生产安全", value: 1, newAddNum: 1, type: "wtlx-scaq-ej" },
      ],
      questionList: [],
      zczbfxData: ["0%", "0%", "0%", "0%", "0%"],
      clnxfxData: ["0%", "0%", "0%", "0%", "0%"],
      // 是否看过去年
      lastYearFlag: 0,
    };
  },
  created() {
    if (this.$store.state.ddReady) {
      this.initData();
    }
    if (window.sessionStorage.getItem("warningList")) {
      this.warnList = JSON.parse(window.sessionStorage.getItem("warningList"));
    }
  },
  mounted() {
    var data1 = [
      {
        name: "数字经济",
        value: 32,
      },
      {
        name: "文化创意",
        value: 23,
      },
      {
        name: "高端制造",
        value: 6,
      },
      {
        name: "时尚行业",
        value: 7,
      },
      {
        name: "金融服务",
        value: 7,
      },
      {
        name: "休闲旅游",
        value: 3,
      },
      {
        name: "生物健康",
        value: 12,
      },
      {
        name: "其他",
        value: 10,
      },
    ];
    var data2 = [
      {
        year: "2019-09",
        新注册企业数: 116,
      },
      {
        year: "2019-10",
        新注册企业数: 116,
      },
      {
        year: "2019-11",
        新注册企业数: 116,
      },
      {
        year: "2019-12",
        新注册企业数: 129,
      },
      {
        year: "2020-01",
        新注册企业数: 135,
      },
      {
        year: "2020-02",
        新注册企业数: 86,
      },
      {
        year: "2020-03",
        新注册企业数: 116,
      },
      {
        year: "2020-04",
        新注册企业数: 116,
      },
      {
        year: "2020-05",
        新注册企业数: 116,
      },
      {
        year: "2020-06",
        新注册企业数: 129,
      },
      {
        year: "2020-07",
        新注册企业数: 135,
      },
      {
        year: "2020-08",
        新注册企业数: 86,
      },
    ];
    var data3 = [
      {
        label: "1月",
        type: "2019年",
        value: 2800,
      },
      {
        label: "1月",
        type: "2020年",
        value: 2260,
      },
      {
        label: "2月",
        type: "2019年",
        value: 1800,
      },
      {
        label: "2月",
        type: "2020年",
        value: 1300,
      },
      {
        label: "3月",
        type: "2019年",
        value: 950,
      },
      {
        label: "3月",
        type: "2020年",
        value: 900,
      },
      {
        label: "4月",
        type: "2019年",
        value: 500,
      },
      {
        label: "4月",
        type: "2020年",
        value: 390,
      },
      {
        label: "5月",
        type: "2019年",
        value: 170,
      },
      {
        label: "5月",
        type: "2020年",
        value: 100,
      },
      {
        label: "6月",
        type: "2019年",
        value: 170,
      },
      {
        label: "6月",
        type: "2020年",
        value: 100,
      },
      {
        label: "7月",
        type: "2019年",
        value: 170,
      },
      {
        label: "7月",
        type: "2020年",
        value: 100,
      },
      {
        label: "8月",
        type: "2019年",
        value: 170,
      },
      {
        label: "8月",
        type: "2020年",
        value: 100,
      },
      {
        label: "9月",
        type: "2020年",
        value: 100,
      },
      {
        label: "9月",
        type: "2019年",
        value: 170,
      },
      {
        label: "10月",
        type: "2019年",
        value: 170,
      },
      {
        label: "11月",
        type: "2019年",
        value: 170,
      },
      {
        label: "12月",
        type: "2019年",
        value: 170,
      },
    ];
    var data4 = [
      {
        月份: "1月",
        预警企业数: 12,
      },
      {
        月份: "2月",
        预警企业数: 23,
      },
      {
        月份: "3月",
        预警企业数: 34,
      },
      {
        月份: "4月",
        预警企业数: 60,
      },
      {
        月份: "5月",
        预警企业数: 52,
      },
      {
        月份: "6月",
        预警企业数: 35,
      },
      {
        月份: "7月",
        预警企业数: 37,
      },
      {
        月份: "8月",
        预警企业数: 42,
      },
      {
        月份: "9月",
        预警企业数: 42,
      },
      {
        月份: "10月",
        预警企业数: 0,
      },
      {
        月份: "11月",
        预警企业数: 0,
      },
      {
        月份: "12月",
        预警企业数: 0,
      },
    ];
    // chanyejiegoufenxi("chanyejiegoufenxi", data1);
    // zhucezoushifenxi("zhucezoushifenxi", data2);
    // nashuizoushi("nashuizoushi", data3);
    // yujingshuliang("yujingshuliang", data4);
  },
  methods: {
    initData() {
      this.getQYXGTJ();
      // this.getBYJCYJQYS();
      this.getDictionaryByCode();
      this.getBNYJQYZS();
      this.getCYFBZB();
      this.getJDXZCQYZS();
      this.getXQNQYNSZS();
      this.getZCZBFX();
      this.getCLNXFX();
    },
    goToCompanyList(type) {
      this.$route.push("", { type });
    },
    // 顶部六类获取企业信息
    getQYXGTJ() {
      this.$api.enterpriseChartsApi({ type: "getQYXGTJ" }).then((res) => {
        const data = res.data.data;
        this.companyInfoList = [
          { name: "企业总数", value: data.qysl },
          { name: "虚拟注册企业", value: data.xnqyzcs,type:'isXnze' },
          { name: "高新企业", value: data.gxqys,type:'isoverDraf' },
          { name: "规上企业", value: data.gsqys||0,type:'isqualified' },
          { name: "本月新增企业", value: data.byxzqys ,noClick:true},
          { name: "本月新注册企业", value: data.byxzcqys,noClick:true },
        ];
      });
    },
    // 获得问题字段列表
    getDictionaryByCode() {
      this.$api
        .dictionary(
          { method: "post", type: "getDictionaryByCode" },
          { code: "wtlx" }
        )
        .then((res) => {
          // let res = [
          //   { code: "wtlx-ryzj-sj", name: "人员骤减" },
          //   { code: "wtlx-qyzjyq-ej", name: "企业骤减园区" },
          //   { code: "wtlx-sxcf-ej", name: "失信处罚" },
          //   { code: "wtlx-scaq-ej", name: "生产安全" },
          //   { code: "wtlx-ynyc-sj", name: "用能异常" },
          //   { code: "wtlx-sbyc-ej", name: "社保异常" },
          //   { code: "wtlx-ssyc-ej", name: "税收异常" },
          //   { code: "wtlx-jyyc-ej", name: "经营异常" },
          //   { code: "wtlx-fkjz-sj", name: "访客激增" },
          //   { code: "wtlx-jrfx-ej", name: "金融风险" },
          // ];
          console.log("问题类型", res);
          this.questionList = res.data.data[0].children;
          // this.questionList = res;
          this.getBYJCYJQYS();
        });
    },
    // 本月检测预警企业数
    getBYJCYJQYS() {
      this.$api.appChartsApi({ type: "getBYJCYJQYS" }).then((res) => {
        const data = res.data.data;
        console.log(data);
        this.warnList = [];
        // this.questionList.forEach(x=>{
        //   this.warnList.push({name:x.name,value:data[x.code.split('-')[1]][1],newAddNum:data[x.code.split('-')[1]][0],type:x.code})
        // })
        this.questionList.forEach((x) => {
          this.warnList.push({
            name: x.name,
            value: data[x.code] || 0,
            newAddNum: 0,
            type: x.code,
          });
        });
        if (this.warnList.length % 3 == 2) {
          this.warnList.push({
            value: "empty",
          });
        }
        window.sessionStorage.setItem(
          "warningList",
          JSON.stringify(this.warnList)
        );
        // this.warnList = [
        //   { name: "用能异常", value: data.ynyc[1], newAddNum: data.ynyc[0],type:'wtlx-ynyc-sj' },
        //   { name: "访客激增", value: data.fkjz[1], newAddNum: data.fkjz[0],type:'wtlx-fkjz-sj' },
        //   { name: "人员骤减", value: data.ryzj[1], newAddNum: data.ryzj[0],type:'wtlx-ryzj-sj' },
        //   { name: "社保异常", value: data.sbyc[1], newAddNum: data.sbyc[0],type:'' },
        //   { name: "经营异常", value: data.jyyc[1], newAddNum: data.jyyc[0],type:'' },
        //   { name: "税收异常", value: data.ssyc[1], newAddNum: data.ssyc[0],type:'' },
        //   { name: "失信处罚", value: data.sxcf[1], newAddNum: data.sxcf[0],type:'' },
        //   { name: "金融风险", value: data.jrfx[1], newAddNum: data.jrfx[0],type:'' },
        //   {
        //     name: "企业骤减园区",
        //     value: data.qyzjyq[1],
        //     newAddNum: data.qyzjyq[0],
        //   },
        // ];
      });
    },
    // 检测预警企业数量走势
    getBNYJQYZS() {
      this.$api.warnChartsApi({ type: "getBNYJQYZS" }).then((res) => {
        const data = res.data.data;
        let chartData = [];
        data.months.forEach((event, index) => {
          if (event) {
            chartData.push({
              月份: event-0+'月',
              预警企业数:
                data.one[index] -
                0 +
                (data.two[index] - 0) +
                (data.three[index] - 0),
            });
          }
        });
        yujingshuliang("yujingshuliang", chartData);
      });
    },
    // 产业分布占比
    getCYFBZB() {
      this.$api.appChartsApi({ type: "getCYFBZB" }).then((res) => {
        let chartData = [];
        res.data.data.num.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyejiegoufenxi("chanyejiegoufenxi", chartData);
      });
    },
    // 切换去年今年
    tabsChange(name, title) {
      if (!name || this.lastYearFlag) return;
      this.$api.appChartsApi({ type: "getCYFBZB" }).then((res) => {
        this.lastYearFlag++;
        let chartData = [];
        res.data.data.lastYear.forEach((event, index) => {
          chartData.push({
            value: event,
            name: res.data.data.industry[index],
          });
        });
        chanyejiegoufenxi("qunianchanyejiegoufenxi", chartData);
      });
    },
    // 辖区内新注册企业走势
    getJDXZCQYZS() {
      this.$api.enterpriseChartsApi({ type: "getJDXZCQYZS" }).then((res) => {
        let chartData = [];
        res.data.data.months.forEach((event, index) => {
          chartData.push({
            year: event,
            新注册企业数: res.data.data.num[index],
          });
        });
        zhucezoushifenxi("zhucezoushifenxi", chartData);
      });
    },
    // 辖区内企业纳税走势
    getXQNQYNSZS() {
      this.$api.appChartsApi({ type: "getXQNQYNSZS" }).then((res) => {
        let chartData = [];
        const nowYear = new Date().getFullYear();
        res.data.data.months.forEach((event, index) => {
          chartData.push(
            {
              value: res.data.data.thisYear[index],
              label: event,
              type: `${nowYear}年`,
            },
            {
              value: res.data.data.lastYear[index],
              label: event,
              type: `${nowYear - 1}年`,
            }
          );
        });
        nashuizoushi("nashuizoushi", chartData);
      });
    },
    // 注册资本分析
    getZCZBFX() {
      this.$api.appChartsApi({ type: "getZCZBFX" }).then((res) => {
        this.zczbfxData = res.data.data.num;
      });
    },
    // 成立年限分析
    getCLNXFX() {
      this.$api.appChartsApi({ type: "getCLNXFX" }).then((res) => {
        this.clnxfxData = res.data.data.num;
      });
    },
  },
  watch: {
    // 获得token后再请求
    "$store.state.ddReady": function (newValue, oldValue) {
      if (newValue) {
        this.initData();
      }
    },
  },
    
};
</script>

<style scoped lang="less">
.avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.root {
  padding: 0 20px;
}
.van-row {
  flex-wrap: wrap;
}
.col {
  position: relative;
  text-align: center;
  background: #fff;
  padding: 20px 0;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.chart-wrapper {
  width: cale(100% - 20px);
  height: 300px;
  margin: 10px 0 65px;
}
.chart-wrapper canvas {
  width: 100%;
  height: 100%;
}
.chart-wrapper2 {
  margin: 10px 0;
}
canvas {
  background: #fff;
  padding-bottom: 10px;
}
p {
  margin: 0;
}
.content-box {
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  height: 30px;
  background: #fff;
}
.point {
  float: left;
  margin-top: 3px;
  margin-left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(66, 122, 243);
}
.color2 {
  background: #7ecf51;
}
.color3 {
  background: #eecb5f;
}
.color4 {
  background: #e3935d;
}
.color5 {
  background: #e16757;
}
.content-box .right-box {
  width: calc(100% - 40px);
  margin-right: 10px;
  line-height: 19px;
  float: right;
  display: flex;
  justify-content: space-between;
}
.content-box .right-box p:nth-child(1) {
  font-size: 14px;
  color: #000;
}
.content-box .right-box p:nth-child(2) {
  font-size: 12px;
  color: #ccc;
}
.last-box .col {
  font-size: 12px;
  padding: 8px 0;
  background: -webkit-linear-gradient(left, #5e9ff6 0%, #67affe 100%);
  box-shadow: none;
  color: #fff;
}
.last-box {
  background: #fff;
  padding: 0 10px 20px;
  margin: 10px 0;
}
.chart-tab {
  height: 490px;
}
.chart-big {
  height: 460px;
}
.newAddTag {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(30%, -50%);
  font-size: 10px;
}
.last-box-cell {
  margin-bottom: 10px;
}
.top-title {
  margin-bottom: 10px;
}
.van-tabs--card {
  background: #fff;
}
.van-tab__pane,
.van-tabs__content,
.van-tab__pane-wrapper {
  height: 470px;
}
.chart-wrapper /deep/ .van-tabs__nav--card {
  border-color: #49a9ee;
}
.van-tab__pane-wrapper /deep/ .van-tab__pane {
  height: 460px;
}
.chart-wrapper /deep/ .van-tab {
  color: #49a9ee;
  border-color: #49a9ee;
}
.chart-wrapper /deep/ .van-tab--active {
  background: #49a9ee;
  color: #fff;
}
</style>
